<template>
  <div class="order_goods_box">
    <!-- <span class="info_title">商品信息</span> -->
      <el-row class="order_tab_head" >
        <el-col :span="10">商品信息</el-col>
        <el-col :span="3">单价</el-col>
        <el-col :span="4">数量</el-col>
        <el-col :span="4">小计</el-col>
        <el-col :span="3">操作</el-col>
      </el-row>
      <ul>
        <li v-for="(goodsItem, goodsIndex) in orderInfosList" :key="goodsIndex" class="order_tab_body exchange el-row">
          <div class="sku_img spu_width_10">
            <div class="activity_img">
                <img :src="prefixImg + goodsItem.img" :alt="goodsItem.goodsName" :title="goodsItem.goodsName" @error="catchErrorImage($event)"/>
                <span class="discount-tag" v-if="goodsItem.price - goodsItem.pmtPrice > 0 && goodsItem.price - goodsItem.pmtPrice < goodsItem.price">活动</span>
            </div>
            <div class="sku_img_text ellipsis">
              <span>【{{goodsItem.brandName}}】{{goodsItem.goodsName}}</span>
              <span>{{goodsItem.other}}</span> <br>
              <p>{{goodsItem.productName}}</p>
            </div>
          </div>
          <span class="sku_price spu_width_3" > {{goodsItem.price}}</span>
          <span class="sku_amount  spu_width_4" > x{{goodsItem.number}}</span>
          <div class="sku_total  spu_width_4" >
            <span>{{(goodsItem.pmtPrice * goodsItem.number).toFixed(2)}}</span>
            <p class="discount-total" v-if="goodsItem.price > goodsItem.pmtPrice">(已优惠{{(goodsItem.price - goodsItem.pmtPrice) * goodsItem.number | floatPrices }})</p>
          </div>
          <div class="exchange-btn spu_width_3" v-if="canExchange">
            <p class="color-blue" v-if="saleType === 'reGoods' && (goodsItem.afterSaleStatus === 0 || goodsItem.afterSaleStatus === 4 ||goodsItem.afterSaleStatus === 5 || goodsItem.afterSaleStatus === null) && (goodsItem.afterSaleNum !== goodsItem.number)"
            @click="applySale(goodsItem, 'reGoods')">申请退货</p>

            <p class="color-blue" v-if="saleType === 'refund' && (goodsItem.afterSaleStatus === 0 || goodsItem.afterSaleStatus === 4 ||goodsItem.afterSaleStatus === 5 || goodsItem.afterSaleStatus === null) && (goodsItem.afterSaleNum !== goodsItem.number)"
             @click="applySale(goodsItem, 'refund')">申请退款</p>
            <p class="color-blue" v-if="goodsItem.afterSaleStatus" @click="fetchSaleLog(goodsItem.id)">售后进度</p>
            <p class="color-blue"  v-if="goodsItem.afterSaleStatus === 2 && saleType === 'reGoods'" @click="getOddNumber = true, orderItemId = goodsItem.id">录入物流单号</p>
            <p class="color-blue" v-show="goodsItem. afterSaleStatus === 2" @click="addrReceive = true">查看收货地址</p>
          </div>
          <div class="exchange-btn spu_width_3" v-else>
            /
          </div>
        </li>
      </ul>
    <!-- <template v-else>
      <el-row class="order_tab_head">
        <el-col :span="9">商品信息</el-col>
        <el-col :span="5">商品单价</el-col>
        <el-col :span="5">商品数量</el-col>
        <el-col :span="5">商品总价(元)</el-col>
      </el-row>
      <ul >
        <li v-for="(goodsItem, goodsIndex) in orderInfosList" :key="goodsIndex" class="order_tab_body">
            <div class="sku_img">
              <div class="activity_img">
                <img v-lazy="prefixImg + goodsItem.img" :alt="goodsItem.goodsName" :title="goodsItem.goodsName">
                <span class="discount-tag" v-if="goodsItem.activity">活动</span>
              </div>
              <div class="sku_img_text ellipsis">
                <span>{{goodsItem.goodsName}}</span>
                <span>{{goodsItem.other}}</span> <br>
                <p>{{goodsItem.productName}} {{goodsItem.activity}}</p>
              </div>
            </div>
            <span class="sku_price" > {{goodsItem.price}}</span>
            <span class="sku_amount" > <em class="samll-font">X</em>  {{goodsItem.number}}</span>
            <span class="sku_total" > {{(goodsItem.price * goodsItem.number).toFixed(2)}}</span>
        </li>
      </ul>
   </template> -->
    <!-- 退换货 exchangeVisi -->
    <el-dialog  title="取消订单原因" :visible.sync="exchangeVisi" width="450px" top="20vh" center >
      <el-radio-group v-model="type">
        <el-radio :label="0">退货</el-radio>
      </el-radio-group>
      <el-input type="textarea" :rows="6" placeholder="退换货原因"  v-model="reason"> </el-input>
      <div style="overflow: hidden;">
          <el-button type="primary"  class="submitBtn" :disabled="cancelTxtLen === 0 " @click="fetchExchange">提交申请</el-button>
      </div>
    </el-dialog>
    <!-- 弹窗 -->
    <section class="pop " v-if="saleProgress">
      <p class="pop-header txt-center">售后进度</p>
      <div class="sale-content ">
        <div class="logistics">
          <h2 class="h2_tit" v-show="saleId">物流单号：{{saleId}}</h2>
          <p class="detail" v-for="(item, index) in logList" :key="index">
            <span class="detail_tit">{{item.createTime}}</span><span class="detail_content" v-html="item.content"></span>
          </p>
        </div>
        <div class="txt-center mar-top20">
          <span class="btn-pop-yellow" @click="saleProgress = false">确定</span>
        </div>
      </div>
    </section>
    <section class="pop txt-center" v-if="getOddNumber">
      <i class="icon el-icon-circle-close-outline pop-close pointer" @click="getOddNumber = false, writeOdd = true, trackingNumber = ''"></i>
      <div v-if="writeOdd">
        <p class="pop-header txt-center">录入物流单号</p>
        <div class="sale-content odd-box">
          <el-input v-model="trackingNumber" placeholder="请输入物流单号"></el-input>
          <div class="txt-center mar-top20">
            <a class="btn-pop-yellow" :class="{'btn-pop-gray': trackingNumber.length === 0}" @click="writeOdd = false">下一步</a>
          </div>
        </div>
      </div>
       <div v-else>
        <p class="pop-header txt-center">确认物流单号</p>
        <div class="sale-content ">
          <p class="odd-num">{{trackingNumber}}</p>
          <div class="txt-center mar-top20">
            <a class="btn-pop-yellow btn-pop-gray" @click="writeOdd = true">返回重新填写</a>
            <a class="btn-pop-yellow" @click="fetchTrackOrder">确定</a>
          </div>
        </div>
      </div>
    </section>
    <section class="pop txt-center" v-if="addrReceive">
      <p class="pop-header ">查看收货地址</p>
      <div class="sale-content ">
        <div class="sale-order">
          <p class="sale-line"><span>收货地址:</span>浙江省温岭市九龙大道230号刀</p>
          <p class="sale-line"><span>收件人:</span>温小岭(收)</p>
          <p class="sale-line"><span>联系电话:</span>15985698265</p>
        </div>
        <div class="txt-center mar-top20">
          <a class="btn-pop-yellow" @click="addrReceive = false">确定</a>
        </div>
      </div>
    </section>
    <div class="v-modal" tabindex="0" style="z-index: 2006;" v-if="saleProgress || getOddNumber || addrReceive"></div>
  </div>
</template>

<script>
  import {Row, Col, Button, Dialog, Input, RadioGroup, Radio} from 'element-ui'
  import {exchangeSales, getSaleLog, setTrackOrder} from '@/service/get-data'
  import {prefixImg} from '@/tool/index'
  import {setSession} from '@/config/mUntils'
  export default {
    name: 'orderDetailInfo',
    components: {
      elRow: Row,
      elCol: Col,
      elButton: Button,
      elDialog: Dialog,
      elInput: Input,
      elRadioGroup: RadioGroup,
      elRadio: Radio
    },
    props: {
      orderInfosList: [Array, Object],
      orderId: {
        type: String
      },
      canExchange: {
        type: Boolean,
        default: true
      },
      saleType: [String, Boolean]
    },
    data () {
      return {
        loadImg: require('../../images/newload.png'),
        exchangeVisi: false, // 退货弹窗
        type: 0, // 退货类型
        reason: '', // 退换货原因
        curGoodsId: '', // 当前退货货品的id
        saleProgress: false, // 售后进度
        getOddNumber: false, // 录入单号
        trackingNumber: '', // 单号
        writeOdd: true, // 写单号
        orderItemId: '', // 货品单号
        againOddNum: false, // 确认物流单号
        addrReceive: false, // 收货地址
        saleId: '', // 日志的id
        logList: [] // 日志列表
      }
    },
    computed: {
      cancelTxtLen () {
        return this.reason.length
      },
      prefixImg () {
        return prefixImg
      }
    },
    methods: {
      catchErrorImage (e) {
        e.target.src = require('img/newload.png')
      },
      // 填写物流单号
      async fetchTrackOrder () {
        let res = await setTrackOrder(this.orderItemId, this.trackingNumber)
        if (res.data && res.data.resultCode === 2000) {
          res = res.data.data
          this.$message({
            message: '物流单号已填写',
            type: 'success'
          })
          this.getOddNumber = false
          this.$emit('setTrack')
        } else {
          this.$message({
            message: res.data.resultMsg,
            type: 'error'
          })
        }
      },
      // 查看售后日志
      async fetchSaleLog (id) {
        let res = await getSaleLog(id)
        if (res.data && res.data.resultCode === 2000) {
          res = res.data.data
          this.saleId = res['trackingNumber']
          this.logList = res['saleLogPOList']
          this.saleProgress = true
        } else {
          this.$message({
            message: res.data.resultMsg,
            type: 'error'
          })
        }
      },
      // 申请售后 退款和退货
      applySale (item, type) {
        setSession('saleObj', item)
        this.$router.push({name: 'customerService', query: {'orderItemId': item.id, 'saleType': type, 'orderId': this.orderId}})
      },
      exchangeApply (goodsId) {
        this.curGoodsId = goodsId
        this.exchangeVisi = true
      },
      async fetchExchange () {
        let res = await exchangeSales(this.curGoodsId, this.type, this.reason)
        if (res.data && res.data.resultCode === 2000) {
          this.$message({
            message: '申请退货成功,请等待工作人员审核!',
            type: 'success'
          })
          this.exchangeVisi = false
          this.reason = '' // 清楚原因
        } else if (res.data && res.data.resultCode === 6000) {
          this.$message({
            message: '此货品已经申请过退货,不能再次申请',
            type: 'error'
          })
          this.exchangeVisi = false
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .info_title{
    margin-bottom: 11.5px;
    display: inline-block;
    color: #333333;
    font-size: 18px;
    line-height: 25px;
    font-weight: 545;
  }
  .order_tab_head{
    height: 45px;
    line-height: 45px;
    border-bottom: 1px solid #dcdcdc;
    border-top: 1px solid #dcdcdc;
    text-align: center;
    color: #474747;
  }
  .order_tab_body{
      display: table;
      width: 100%;
      color: #474747;
      min-height: 50px;
     @include border_bt();
     .order_tab_spu{
       vertical-align: top;
       font-size: 16px;
       display: inline-block;
       width: 20%;
       text-align: center;
     }
      .sku_img, .sku_price, .sku_amount, .sku_total{
        display: table-cell;
        text-align: center;
        vertical-align: middle;
      }
      .sku_img{
        // width: 37.5%;
        text-align: left;
        overflow: hidden;
        padding: 10px 0;
        .sku_img_text{
          width:273px;
          display: inline-block;
          padding-left: 10px;
          vertical-align: middle;
          span{
            // padding-right: 14px;
            line-height: 2;
          }
          p{
            line-height: 2;
          }
        }
      }
      .activity_img{
          position: relative;
          display: inline-block;
          // margin-left: 30px;
          width: 65px;
          height: 65px;
          vertical-align: middle;
          & > img{
            width: 100%;
            height:100%;
          }
      }
      .sku_price, .sku_amount, .sku_total{
       //  width: 20.83333%;
        font-size:14px;

      }
      .sku_total{
        color:#F55923;
        font-weight: 600;
        font-size:18px;
      }
      .discount-total{
        font-size: 12px;
        line-height: 1;
      }
  }
  .exchange{
    color: #474747;
    display: table;
    width:100%;
    line-height: 30px;
    .sku_img{
        text-align: left;
        img{
          // margin-left: 50px;
          width: 64px;
          vertical-align: middle;
          margin-right: 10px;
        }
      }
    .sku_name .sku_price, .sku_amount, .sku_total{
      font-size: 16px;
      // width:20.83%;
      text-align: center;
    }
    .sku_total{
      font-size: 18px;
      color: #F55923;
    }
  }
  .submitBtn{
    float: right;
     margin-top: 20px;
  }
  .samll-font{
    font-size:12px;
  }

  .exchange-btn{
      display: table-cell;
      cursor: pointer;
      // margin-top: 20px;
      // margin-left: 15px;
      vertical-align: middle;
      text-align: center;
      padding-right: 10px;
      font-size: 14px;
      .btn-sale{
        background: #ffcc00;
        border-radius: 2px;
        color: #333333;
        text-align: center;

      }
    }
  // 弹窗
  .h2_tit{
    font-size: 14px;
    color: #303030;
    line-height: 20px;
    margin-bottom: 10px;
  }
  .logistics{
    padding-left: 28px;
    max-height: 250px;
    overflow-y: auto;
    .detail{
      color: rgba(107,107,107,1);
      line-height: 18px;
      font-size: 13px;
      margin-bottom: 9px;
      overflow: hidden;
    }
    .detail_tit{
      float: left;
    }
    .detail_content{
      padding-left: 10px;
      float: left;
    }
  }
  .odd-box{
    width: 250px;
    margin: 0 auto;
  }
  .odd-num{
    font-size: 22px;
    line-height: 30px;
    padding: 20px 0;
  }
  .pop-close{
      position: absolute;
      right: 10px;
      top: 10px;
    }
</style>
